<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>催办</title>
    <script src="../../js/header.js"></script>
    <style type="text/css">
        html, body, #app {
            padding: 0px;
            margin: 0px;
        }

        #app {
            border-top: 3px solid #0D9AFF;
            background: #FFFFFF;
            box-shadow: 0px 2px 4px 0 rgba(200, 200, 200, 0.50);
            padding: 25px;
            background: url(../../images/bg.png) no-repeat;
            background-size: cover;
            /*background-attachment: fixed;*/
        }

        .tab-title {
            font-size: 16px;
            font-weight: bold;
            border-left: 4px solid #0D9AFF;
            font-family: PingFangSC-Medium;
            padding-left: 10px;
            margin-bottom: 20px;
        }

        .pagination {
            text-align: center;
            margin-top: 30px;
        }

        .el-dialog__footer {
            padding: 10px 20px 20px;
            text-align: center;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .el-dialog__body {
            color: rgb(96, 98, 102);
            font-size: 14px;
            word-break: break-all;
            padding: 0px 20px;
        }

        .el-input__inner {
            -webkit-appearance: none;
            background-color: #FFF;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 30px;
            line-height: 30px;
            outline: 0;
            padding: 0 15px;
            -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
        }
    </style>
</head>

<body>
<div v-cloak id="app">
    <!--待办-->    
    <!--已办-->
    <!--查看弹窗-->
    <div style="margin-top: 10px;">
		<el-form :model="presssupervisionrecord" :rules="rules" ref="presssupervisionrecord" label-width="140px">
			<el-row>
				<el-col :span="4" class="tab-title">
					监管结果记录
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="标题:" prop="supervisionrecord.title" :rules="rules.title" label-width="110px">
						<el-input v-model="presssupervisionrecord.supervisionrecord.title" placeholder="" style="" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="创建人:" prop="supervisionrecord.createUser" :rules="rules.createUser" label-width="150px">
						<el-input v-model="presssupervisionrecord.supervisionrecord.createUser" placeholder="" disabled></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>		
				<el-col :span="7">
					<el-form-item label="创建人单位:" prop="supervisionrecord.createUserUnit" :rules="rules.createUserUnit" label-width="110px">
						<el-input v-model="presssupervisionrecord.supervisionrecord.createUserUnit" placeholder="" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="创建时间:" prop="supervisionrecord.createTime" :rules="rules.createTime" label-width="150px">
						<el-date-picker type="date" placeholder="" v-model="presssupervisionrecord.supervisionrecord.createTime"
												value-format="yyyy-MM-dd" disabled>
								</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>					
				<el-col :span="7">
					<el-form-item label="监管对象名称:" prop="supervisionrecord.supervisionObjectName" label-width="110px">
						<el-input v-model="presssupervisionrecord.supervisionrecord.supervisionObjectName" placeholder="" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="监管对象类别:" prop="supervisionrecord.supervisionType" :rules="rules.supervisionType" label-width="150px">
						<el-select v-model="presssupervisionrecord.supervisionrecord.supervisionType" placeholder="请选择" disabled>
                          	<el-option label="设施" value="0"></el-option>
                          	<el-option label="环境" value="1"></el-option>
                          	<el-option label="台网" value="2"></el-option>
                          	<el-option label="地球物理台网" value="3"></el-option>
                          	<el-option label="辅助设施台网" value="4"></el-option>
                      	</el-select>
                    </el-form-item>
				</el-col>
			</el-row>					
			<!--<el-row>
				<el-col :span="22">
					<el-form-item label="监管情况记录:" prop="supervisionrecord.supervisionRecordContent" :rules="rules.supervisionRecordContent" label-width="110px">
						<el-input
								disabled
								type="textarea"
								:autosize="{ minRows: 8, maxRows: 8}"
								placeholder=""
								maxlength="500"
								show-word-limit
								v-model="presssupervisionrecord.supervisionrecord.supervisionRecordContent">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>-->
			<el-row>						
				<el-col :span="22">
					<el-form-item label="附件:" prop="" label-width="110px">						
						<iframe width="100%"  style="height: 200px;border: none;"   :src="link"></iframe>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="4" class="tab-title">
					催办信息
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="7">
					<el-form-item label="催办主题:" prop="press.title" :rules="rules.title" label-width="110px">
						<el-input v-model="presssupervisionrecord.press.title" placeholder="" style="" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-form-item label="催办机构:" prop="press.orgName" :rules="rules.orgName" label-width="110px">
						<el-input v-model="presssupervisionrecord.press.orgName" placeholder="" style="" ></el-input>
					</el-form-item>
				</el-col>					
			</el-row>
			<el-row>
				<el-col :span="22">
					<el-form-item label="催办内容:" prop="press.content" :rules="rules.content" label-width="110px">
						<el-input
								type="textarea"
								:autosize="{ minRows: 8, maxRows: 8}"
								placeholder=""
								maxlength="500"
								show-word-limit
								v-model="presssupervisionrecord.press.content">
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="22">
					<div style="float:right;">							
						<el-button type="info" size="small" style="width: 60px;height: 30px;"
								   @click="viewCancel()">关闭
						</el-button>
					</div>
				</el-col>
			</el-row>
		</el-form>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                uuid: '',// uuid
                link: '', // 附件iframe
                linkId: '', //项目ID
                linkStatus: '', //状态码
                // 用户登录信息
                userName: '', // 用户登录名称
                orgName: '', // 组织名称对应项目地址
                orgLevel: '', // 组织等级对应 地市级、省级、中国级地震局用户
                presssupervisionrecord: {
                	supervisionrecord:{
                		id:'',
                		title: '',
	                    createUser: '',
	                    createUserUnit: '',
	                    createTime: '',
	                    supervisionObjectName: '',
	                    supervisionType:'',
	                    supervisionRecordContent: 'AA',
	                   	status: ''
                	},
                	press:{
                		linkId:'',
                		title:'',
                		orgName:'',
                		content:''
                	}
                   
                },
                rules: {
                    title: [{
                        required: true,
                        message: '请输入标题',
                        trigger: 'blur'
                    }],
                    createUser: [{
                        required: true,
                        message: '请输入创建人',
                        trigger: 'blur'
                    }],
                    createUserUnit: [{
                        required: true,
                        message: '请输入创建单位',
                        trigger: 'blur'
                    }],
                    createTime: [{
                        required: true,
                        message: '请选择日期',
                        trigger: 'change'
                    }],
                    supervisionRecordContent: [{
                        required: true,
                        message: '请输入监管情况记录',
                        trigger: 'blur'
                    }],
                    supervisionType: [{
                        required: true,
                        message: '请选择监管对象类别',
                        trigger: 'change'
                    }],
                    orgName: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }],
                    content: [{
                        required: true,
                        message: '必填',
                        trigger: 'blur'
                    }]
                }
            }
        },
        created() {
            // 地址Json树导入
            axios.get('../../json/ChinaCity.json').then(res => {
                this.provinceData = res.data;
            }).catch(e => {
                this.$message.error("网络连接超时");
            });
            // 获取登录用户信息
            var userInfo = JSON.parse(localStorage.getItem('userInfo'));
            this.orgLevel = userInfo.orgLevel;
            // 中国地震局 ==> 中国, 山东省-济南市地震局 ==> 山东省-济南市
            this.orgName = userInfo.orgName.replace("地震局", "");
            this.userName = userInfo.loginName;
            console.log("用户名：" + this.userName);
            console.log("组织等级：" + this.orgLevel);
            console.log("组织名称：" + this.orgName);
        },
        mounted() {
            console.log(window.location.href);
            var url = window.location.href;
            this.linkId = url.split("?")[1].split("=")[1];
            console.log(this.linkId)
            this.uuid = this.linkId;
            this.link = "../upload/annex.html?uuid=" + this.uuid + "&flag=0";
            this.getData();
        },
        methods: {
            // 加载数据
            getData() {
                axios({
                    method: 'get',
                    url: '/dzjjcss/press/getAll',
                    params: {
                        id: this.linkId
                    }
                }).then(response => {
                        console.log(response);
                        console.log(response.data);
                        if (response.data.code == 200) {
							console.log(response.data.data)
                            this.presssupervisionrecord.press = response.data.data.press;
							this.presssupervisionrecord.supervisionrecord = response.data.data.registerEntity;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            // 审定完成确认方法
            checkonSubmit(formName) {
                console.log(this.checkcommonproject.reId);
                this.$refs[formName].validate((valid) => {
                    if (valid) {
		                axios({
		                    method: 'post',
		                    url: '/dzjap/generecord/check',
		                    // data中必须有reId
		                    data: this.checkcommonproject
		                }).then((res) => {
		                    console.log(res);
		                    parent.vm.getData();
		                    if (res.data.code == 200) {
		                        // 提交成功将要执行的代码
		                        this.$message({
		                            message: '审定成功',
		                            type: 'success'
		                        });
		                        this.checkCancel();
		                    }
		                });
		            } else {
                        this.$message({
                            message: 'error!',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            // 调用父页面方法关闭弹窗
            checkCancel() {
                parent.vm.cuibanCancel();
            },
            viewCancel() {
                parent.vm.cuibanCancel();
            },
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3);
            }
        }

    })
</script>
</body>
</html>